<template>
  <div class="contain" ref="specialContain">
    <!-- 专栏模块 -->
    <div class="model">
      <div class="logo">
        <img src="@/assets/images/zl.png" alt="" @load="imgLoad" />
      </div>
      <div class="swiper-contain" ref="swiper-contain">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in srcList"
            :key="index"
          >
            <div class="slide_box">
              <a :href="item.path" target="_blank">
                <div class="top_img">
                  <img :src="item.img" alt="" />
                  <h1 class="title">{{ item.title }}</h1>
                </div>
                <div class="des">
                  <h1 class="title2">
                    <span>{{ item.title2 }}</span>
                    {{ item.des }}
                  </h1>
                </div>
              </a>
            </div>
          </div>
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-navga-box">
          <div
            class="my-swiper-button-prev el-icon-arrow-left"
            ref="my-swiper-button-prev"
          ></div>
          <div
            class="my-swiper-button-next el-icon-arrow-right"
            ref="my-swiper-button-next"
          ></div>
        </div>
      </div>
    </div>
    <div ref="bg-bor" class="bg-bor"></div>
    <div ref="bot" class="bot"></div>
    <div ref="leftCon" class="leftCon"></div>
    <div ref="rightCon" class="rightCon"></div>
    <a
      class="viewMore"
      href="https://news.sjtu.edu.cn/ztzl/index.html"
      target="_blank"
    >
      <i class="el-icon-plus"></i>
      更多专栏
    </a>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      srcList: [
        {
          title: "党建风采巡礼",
          title2: "【成就巡礼】",
          des: "本科人才培养：守正创新，深耕内涵发展... ",
          img: require("@/assets/images/20201210_082431_734.jpg"),
          path: "https://news.sjtu.edu.cn/ztzl_djfcxl/20201211/137337.html"
        },
        {
          title: "党建风采巡礼",
          title2: "【成就巡礼】",
          des: "科研工作：党建引领 使命担当...",
          img: require("@/assets/images/20201225_021411_782.jpg"),
          path: "https://news.sjtu.edu.cn/ztzl_djfcxl/20201225/138897.html"
        },
        {
          title: "党建风采巡礼",
          title2: "【成就巡礼】",
          des: "人才队伍建设：敢为人先 以人为本... ",
          img: require("@/assets/images/20201222_075721_692.jpg"),
          path: "https://news.sjtu.edu.cn/ztzl_djfcxl/20201223/138647.html"
        },
        {
          title: "党建风采巡礼",
          title2: "【成就巡礼】",
          des: "大学文化建设：举旗帜、聚民心、展形象，文化引领助力育人格... ",
          img: require("@/assets/images/20201210_033904_984.jpg"),
          path: "https://news.sjtu.edu.cn/ztzl_djfcxl/20201210/137259.html"
        },
        {
          title: "党建风采巡礼",
          title2: "【成就巡礼】",
          des: "国际化：推动“交·通全球”战略，助力实现全校卓越发展",
          img: require("@/assets/images/20201219_025637_166.jpg"),
          path: "https://news.sjtu.edu.cn/ztzl_djfcxl/20201219/138151.html"
        },
        {
          title: "党建风采巡礼",
          title2: "【成就巡礼】",
          des: "社会服务：面向国家战略，服务区域发展，在使命担当中... ",
          img: require("@/assets/images/20201218_024255_954.jpg"),
          path: "https://news.sjtu.edu.cn/ztzl_djfcxl/20201218/138035.html"
        }
      ]
    };
  },
  methods: {
    setCon() {
      const leftCon = this.$refs.leftCon; // eslint-disable-line
      const rightCon = this.$refs.rightCon; // eslint-disable-line
      const specialContainH = this.$refs.specialContain.offsetHeight;
      const bgBor = this.$refs["bg-bor"];
      const coefficient = 0.8;
      const coefficient2 = 0.5;
      leftCon.style.height = specialContainH * coefficient + "px";
      leftCon.style.top = (specialContainH * (1 - coefficient)) / 2 + "px";
      rightCon.style.height = specialContainH * coefficient + "px";
      rightCon.style.top = (specialContainH * (1 - coefficient)) / 2 + "px";
      bgBor.style.height = specialContainH * coefficient2 + "px";
      bgBor.style.top = (specialContainH * (1 - coefficient2)) / 2 + "px";
    },
    imgLoad() {
      this.$nextTick(() => {
        this.setCon();
      });
    },
    swiperInit() {
      // const that = this;
      this.swiper = new Swiper(this.$refs["swiper-contain"], {
        autoplay: {
          delay: 4 * 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: this.$store.state.device == "pc" ? 5 : 3,
        centeredSlides: true,
        loop: true,
        // on: {
        //   slideChangeTransitionEnd: function() {
        //     // console.log('this.activeIndex',this.activeIndex)
        //     that.activeIndex = this.activeIndex;
        //   }
        // }
        // 如果需要分页器
        // pagination: {
        //   el: '.swiper-pagination',
        // },
        navigation: {
          nextEl: this.$refs["my-swiper-button-next"],
          prevEl: this.$refs["my-swiper-button-prev"]
        }
      });
    }
  },
  mounted() {
    this.swiperInit();
  }
};
</script>

<style scoped lang="scss">
.contain {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 30px;
  .leftCon {
    width: 20%;
    border: 10px solid #f7eede;
    position: absolute;
    left: -15px;
  }
  .rightCon {
    width: 20%;
    border: 10px solid #f7eede;
    position: absolute;
    right: -15px;
  }
  .viewMore {
    color: $base-color;
    border: 1px solid $base-color;
    border-radius: 20px;
    padding: 5px 8px;
    font-size: 12px;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 12;
    transition: 0.3s;
    &:hover {
      font-size: 13px;
    }
  }
  .bg-bor {
    width: 70%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 12px solid #edc8bb;
  }
  .bot {
    width: 100%;
    border-top: 15px solid #d38d8d;
    background-color: #d2dade;
    position: absolute;
    bottom: 60px;
    height: 50%;
  }
  .model {
    width: $base-width;
    margin: 0 auto;
    padding: 30px 0 30px 0;
    position: relative;
    z-index: 10;
    @media only screen and (min-width: 480px) and (max-width: 1200px) {
      /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
      width: 100%;
    }
    @media screen and (min-width: 320px) and (max-width: 480px) {
      /* 在这里写小屏幕设备的样式 */
      width: 100%;
    }
    .logo {
      margin-bottom: 60px;
      img {
        width: 70%;
        margin: auto;
        display: block;
        @media only screen and (min-width: 480px) and (max-width: 1200px) {
          /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
          width: 100%;
        }
        @media screen and (min-width: 320px) and (max-width: 480px) {
          /* 在这里写小屏幕设备的样式 */
          width: 100%;
        }
      }
    }
    .swiper-contain {
      overflow: hidden;
      // width: 65%;
      margin: 0 auto;
      position: relative;
      padding-bottom: 60px;
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        width: 95%;
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        width: 95%;
      }
      .swiper-wrapper {
        .swiper-slide {
          padding: 0 10px;
          &:hover {
            .top_img {
              img {
                transform: translateX(-50%) scale(1.1);
              }
            }
            .title2 {
              color: $base-color;
            }
          }
          .slide_box {
            position: relative;
            // &::before{
            //   // width: 10px;
            //   // height: 10px;
            //   border-radius: 50%;
            //   border: 5px solid #efc3c3;
            //   content: " ";
            //   position: absolute;
            //   left: 0;
            //   top: 0;
            //   padding: 5px;
            // }
            &::after {
              // width: 10px;
              // height: 10px;
              border-radius: 50%;
              border: 3px solid #efc3c3;
              content: " ";
              position: absolute;
              right: -20px;
              top: 0;
              padding: 3px;
            }
          }
          .title2 {
            span {
              color: $base-color;
            }
            font-size: 11px;
            line-height: 15px;
          }
          .top_img {
            overflow: hidden;
            border-radius: 50% 50% 0 0;
            position: relative;
            height: 130px;
            img {
              // width: 150%;
              height: 100%;
              position: relative;
              left: 50%;
              transform: translateX(-50%);
              display: block;
              transition: 0.3s;
            }
            .title {
              position: absolute;
              bottom: 10px;
              width: 100%;
              text-align: center;
              left: 0;
              font-size: 12px;
              color: #fff;
            }
          }
          .des {
            padding: 10px;
            background-color: #fff;
            height: 80px;
            font-size: 8px;
            line-height: 14px;
            @media only screen and (min-width: 480px) and (max-width: 1200px) {
              /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
              width: 100%;
              height: 120px;
            }
            @media screen and (min-width: 320px) and (max-width: 480px) {
              /* 在这里写小屏幕设备的样式 */
              width: 100%;
              height: 120px;
            }
          }
        }
      }
      .swiper-button-navga-box {
        position: absolute;
        width: 40%;
        height: 50px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        .my-swiper-button-next {
          font-size: 16px;
          position: absolute;
          right: 10px;
          cursor: pointer;
          padding: 15px;
          border-radius: 5px;
          transition: 0.3s;
          &:hover {
            background-color: rgba($color: #000000, $alpha: 0.2);
          }
        }
        .my-swiper-button-prev {
          font-size: 16px;
          position: absolute;
          left: 10px;
          cursor: pointer;
          padding: 15px;
          border-radius: 5px;
          transition: 0.3s;
          &:hover {
            background-color: rgba($color: #000000, $alpha: 0.2);
          }
        }
      }
    }
  }
}
</style>
